<template>
    <view class="container">
        <header-bar :config="config" @rightClick="addOrderClick"></header-bar>
        <view class="base-info-box">
            <view class="base-info-bg"></view>
            <view class="base-info">
                <view class="info-head">
                    <!-- <image src="/static/img/no-img.jpg" class="img" alt=""></image> -->
                    <image src="/static/img/erp/icon_sp_report.png" class="img"></image>
                    <view class="name">{{ parentData.PName }}</view>
                </view>
                <view class="info-con">
                    <view class="c-item">
                        <view class="num">{{ parentData.Qty }}</view>
                        <view class="unit">库存余量</view>
                        <view class="line"></view>
                    </view>
                    <view class="c-item">
                        <view class="num">{{ parentData.Total }}</view>
                        <view class="unit">余量成本</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="main">
            <goods-detail-list ref="goodsDetailList" :height="listHeight"></goods-detail-list>
        </view>
    </view>
</template>

<script>
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "@/components/common/tab-bar.vue"
import searchBar from "@/components/common/search-bar.vue"
import goodsDetailList from "./goods-detail-list.vue"
import utilsOld from "@/utils/utils.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        tabBar,
        searchBar,
        goodsDetailList,
    },
    data() {
        return {
            placeholderText: "输入客户名称或手机号",
            config: {
                title: "商品详情",
                back: true,
                centerSlot: true,
                rightSlot: true,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                    },
                ],
            },
            listHeight: "",
            loadOk: false,
            actions: [],
            searchForm: {
                type: "2",
                fullName: "",
                pCode: "",
            },
            parentData: {}, // 列表页传递数据
        }
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, "#4D4F9B"]
    },
    onLoad(options) {
        this.parentData = JSON.parse(decodeURIComponent(options.data))
        this.searchForm.fullName = storage.getCache("storeFullName")
        this.searchForm.pCode = this.parentData.PTypeId
    },
    mounted() {
        this.getListHeight()
        if (this.$refs.goodsDetailList) {
            this.$refs.goodsDetailList.refresh(this.searchForm)
        }
    },
    onShow() {},
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
    },
}
</script>

<style lang="scss">
/deep/.searchBar {
    background: #4d4f9b;
}
.base-info-box {
    position: relative;
    height: 320rpx;
    margin-bottom: 24rpx;
    .base-info-bg {
        height: 180rpx;
        background: #4d4f9b;
        border-radius: 0px 0px 20px 20px;
    }
    .base-info {
        position: absolute;
        top: 48rpx;
        left: $app-page-padding;
        right: $app-page-padding;
        height: 270rpx;
        z-index: 3;
        background: #ffffff;
        box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 32rpx;
        box-sizing: border-box;
        .info-head {
            display: flex;
            margin-bottom: 24rpx;
            .img {
                width: 20px;
                height: 20px;
                border-radius: 8rpx;
                margin-right: 16rpx;
            }
            .name {
                height: 100rpx;
                line-height: 50rpx;
                flex: 1;
                font-size: $size-32;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
        .info-con {
            display: flex;
            align-items: center;
            .c-item {
                box-sizing: border-box;
                position: relative;
                display: flex;
                width: 50%;
                padding: 0 8rpx;
                flex-flow: column;
                align-items: center;
                .num {
                    font-size: $size-32;
                    word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
                .unit {
                    font-size: $size-22;
                    color: $color-gray-3;
                }
                .line {
                    position: absolute;
                    top: 16rpx;
                    right: 0;
                    width: 1px;
                    height: 48rpx;
                    background: #ebebeb;
                }
            }
        }
    }
}
.list {
    margin: 0 $app-page-padding 0;
    padding: 0 $app-page-padding;
    background: $color-white;
    .list-item {
        padding: 28rpx 0 34rpx;
        border-bottom: #ebebeb solid 1px;
        .i-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32rpx;
            .icon {
                display: inline-flex;
                width: 20px;
                height: 20px;
                margin-right: 4rpx;
            }
            .info {
                flex: 1;
                .name {
                    font-size: $size-28;
                    font-weight: bold;
                    // padding-bottom: 12rpx;
                    // align-items: center;
                }
                .code {
                    font-size: $size-28;
                    color: $color-gray-3;
                }
            }
        }
        .i-con {
            display: flex;
            align-items: center;
            .i-c-item {
                box-sizing: border-box;
                position: relative;
                display: flex;
                width: 50%;
                padding: 0 8rpx;
                flex-flow: column;
                align-items: center;
                .num {
                    font-size: $size-32;
                    word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
                .unit {
                    font-size: $size-22;
                    color: $color-gray-3;
                }
                .line {
                    position: absolute;
                    top: 16rpx;
                    right: 0;
                    width: 1px;
                    height: 48rpx;
                    background: #ebebeb;
                }
            }
        }
    }
}
</style>
